<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js表单案例</title>
    <!--调整一下位置和内边距	-->
    <style type="text/css">
        * {
            margin: 10px auto;
            padding: 5px;
        }
        span{
            display: inline-block;
            width: 300px;
        }
    </style>
</head>
<body>
<!--表单用户名，密码，登录，重置-->
<form name="f">
    用户名：<input type="text" id="user" value=""/>
    <span></span><br>
    密码： <input type="password" id="pwd" value=""/>
    <span></span>
    <br>
    <input type="submit" value="登陆" onclick="onk()"/>
    <input type="reset" value="重新填写"/>
</form>
<script>
        //id获取文档
        let isSpan = document.querySelectorAll("span")
         let user = document.getElementById("user");
        let pwd = document.getElementById("pwd").value;
        //获得焦点，边框变为蓝色
        user.onfocus = function () {
            this.style.borderColor = "blue";
            isSpan[0].innerHTML = "请输入6-16位的英文加数字的用户名"
        }
        // 失去焦点，边框变为黑色
        user.onblur = function () {

            this.style.borderColor = "#000000";
            if( user.value.length < 6 ){
                isSpan[0].innerHTML = "您输入的这个用户名长度过短"
            }else if(  user.value.length > 16 ){
                isSpan[0].innerHTML = "您输入的这个用户名长度过长"
            }else{
                isSpan[0].innerHTML = "合法用户名"
            }
        }
        </script>
</body>
</html>
